import React, { forwardRef } from 'react';
import './index.scss';

export interface SecurityItem {
  key: string;
  text: string;
  icon: string;
  gradient: string;
  borderGradient: string;
  onClick?: () => void;
}

export interface CitySecurityProps {
  /**
   * 安保项目列表
   */
  securityItems?: SecurityItem[];

  /**
   * 点击事件
   */
  onClick?: () => void;

  /**
   * 自定义样式
   */
  style?: React.CSSProperties;

  /**
   * 自定义类名
   */
  className?: string;

  // 低代码平台相关属性
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const CitySecurity = forwardRef<HTMLDivElement, CitySecurityProps>((props, ref) => {
  const {
    securityItems = [
      {
        key: 'security',
        text: '市保',
        icon: 'http://localhost:8085/static/images/yuangongguanli/编组14.png',
        gradient: 'linear-gradient(270deg, rgba(26,119,252,0) 0%, rgba(26,119,252,0.53) 100%)',
        borderGradient: 'linear-gradient(270deg, rgba(0, 139, 255, 0), rgba(230, 244, 255, 1))',
      },
      {
        key: 'binhe',
        text: '滨和',
        icon: 'http://localhost:8085/static/images/yuangongguanli/编组21.png',
        gradient: 'linear-gradient(270deg, rgba(255,131,0,0) 0%, rgba(255,143,24,0.08) 100%)',
        borderGradient: 'linear-gradient(270deg, rgba(255, 131, 0, 0), rgba(255, 255, 255, 1))',
      },
      {
        key: 'property',
        text: '绿城物业',
        icon: 'http://localhost:8085/static/images/yuangongguanli/编组32.png',
        gradient: 'linear-gradient(273deg, rgba(14,232,22,0) 0%, rgba(27,155,32,0.2) 100%)',
        borderGradient: 'linear-gradient(270deg, rgba(0, 139, 255, 0), rgba(230, 244, 255, 1))',
      },
      {
        key: 'cleaning',
        text: '绿城保洁',
        icon: 'http://localhost:8085/static/images/yuangongguanli/编组21备份2.png',
        gradient: 'linear-gradient(270deg, rgba(255,227,46,0) 0%, rgba(255,227,46,0.59) 100%)',
        borderGradient: 'linear-gradient(270deg, rgba(255, 240, 202, 0), rgba(230, 244, 255, 1))',
      },
    ],
    onClick,
    style = {},
    className = '',
    __designMode,
    componentId,
    _componentName,
    forwardRef: forwardRefProp,
    ...otherProps
  } = props;

  const handleClick = () => {
    onClick?.();
  };

  const handleItemClick = (item: SecurityItem) => {
    item.onClick?.();
  };

  const componentClassName = [
    'hzdz-city-security',
    className
  ].filter(Boolean).join(' ');

  return (
    <div
      ref={ref}
      className={componentClassName}
      style={style}
      onClick={handleClick}
      data-component-id={componentId}
      data-component-name={_componentName}
      data-design-mode={__designMode}
      {...otherProps}
    >
      {securityItems.map((item, index) => (
        <div
          key={item.key}
          className="hzdz-city-security__item"
          onClick={() => handleItemClick(item)}
          style={{
            background: item.gradient,
          }}
        >
          <div className="hzdz-city-security__text">{item.text}</div>
          <div className="hzdz-city-security__icon">
            <img src={item.icon} alt={item.text} />
          </div>
        </div>
      ))}
    </div>
  );
});

CitySecurity.displayName = 'CitySecurity';

export default CitySecurity;
